<template>
	<div class="w-full">
		<el-select v-model="selected.value" :placeholder="props.title" popper-class="contract-pop-popper "
			suffix-icon="CaretBottom" @change="change">
			<el-option v-for="item in props.list" :key="item.value" :label="item.label" :value="item.value"></el-option>
		</el-select>
	</div>
</template>
<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
interface IProps {
	title?: string;
	list: any;
}

const props = defineProps<IProps>();
const emits = defineEmits(['change']);

const selected = ref<any>({
	label: '',
	value: ''
})

const change = (val: any) => {
	props.list.forEach((item: any) => {
		if (item.value == val) {
			selected.value.label = item.label;
			selected.value.value = val;
		}
	})
	emits('change', selected.value)
}

onMounted(() => {
	selected.value.value = props.list[0].value;
	selected.value.label = props.list[0].label;
})

</script>
<style lang="scss" scoped>
::v-deep .el-select__wrapper {
	background-color: #272727;
	box-shadow: none !important;
	border: none !important;
}

::v-deep .el-select__placeholder {
	color: #fff;
}
</style>
<style lang="scss">
.contract-pop-popper {
	background-color: #121212;
	box-shadow: none;
	border: none !important;
	ul {
		padding: 0;
		border: none !important;
		border: 1px solid #202020 !important;
		border-radius: 8px;

		li {
			color: #fff;
		}

		.el-select-dropdown__item.is-selected {
			background-color: #121212;
			color: #114CEE;
		}

		.el-select-dropdown__item.is-hovering {
			background-color: #202020;
		}
	}

	.el-popper__arrow:before {
		display: none;
	}
}
</style>
